<template>
  <div class="margrinThirty" style="height: 100vh;">
    <div style="margin-bottom: 15px;">
      <router-link to="">
        <el-button @click="$router.back(-1)" type="primary" size="medium">返回</el-button>
      </router-link>
    </div>
    <div class="contentCss">
      <div class="comboTitle">课程信息</div>
      <div class="comboMain">
        <div class="widthFive">
          <div class="margrinThirty">
            <div class="imageCss">
              <div style="margin-left: -45px;"><span class="spanTitle">封面</span>
                <el-tooltip placement="top" style="line-height: 100px;margin-right: 30px;">
                  <div slot="content">请上传封面图片</div>
                  <i class="el-icon-info" style="font-size: 18px;"></i>
                </el-tooltip>
              </div>
              <!-- 封面图片 -->
              <div style="text-align: left;display: flex;margin-bottom: 20px;">
                  <div v-if="imageUrl" style="display: flex;">
                    <div v-for="(img,index) in imageUrl" :key="index" style="margin: 10px;">
                      <img :src="img" class="avatar" @mouseover="showDelPic = true">
                    </div>
                  </div>
              </div>
            </div>
            <div><span class="spanTitle">课程名称：</span>
              <span class="widthFive" style="color: #9d9d9d;">{{form.name}}</span>
            </div>

            <div class="margrinTopTwenty" style="line-height: 26px;"><span class="spanTitle">课程简介：</span>
              <span class="widthFive">{{form.desc}}</span>
            </div>
            <div class="margrinTopTwenty"><span class="spanTitle">标准价格：</span>
              <span class="widthFive" style="color: red;">￥{{form.price}} 元</span>
            </div>
            <div class="margrinTopTwenty"><span class="spanTitle">次数会员价：</span>
              <span class="widthFive" style="color: red;">￥{{form.num_vip_price}} 元</span>
            </div>
            <div class="margrinTopTwenty"><span class="spanTitle">年费会员价：</span>
              <span class="widthFive" style="color: red;">￥{{form.time_vip_price}} 元</span>
            </div>
            <div class="margrinTopTwenty">
              <span class="spanTitle">课程类型：</span>
              <span v-for="item in typeList">
                <el-tag style="margin-right: 5px;margin-bottom: 5px;">{{item.name}}</el-tag>
              </span>
            </div>
            <!-- 添加标签 -->
            <div style="margin-top: 20px;">
              <div style="display: flex;line-height: 40px;">

                <div class="tasklabel" style="display: flex;">
                  <span class="spanTitle">课程标签：</span>
                  <span v-if="dynamicTags.length>0">
                    <el-tag :key="tag" type="warning" style="margin-right: 5px;margin-bottom: 5px;" v-for="tag in dynamicTags"
                      :disable-transitions="false">
                      {{tag}}
                    </el-tag>
                  </span>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="widthFive">
          <div class="margrinTopTwenty">
            <span class="spanTitle">导师名称：</span>
            <el-select v-model="form.teacher_id" disabled placeholder="请选择导师">
              <el-option v-for="item in teacherList" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </div>
          <div class="margrinTopTwenty">
            <div class="margrinTopTwenty">
              <span class="spanTitle">学习形式：</span>
              <el-tag v-if="form.study_type=='come'">线下</el-tag>
              <el-tag v-if="form.study_type=='online'">线上</el-tag>

            </div>
          </div>
          <!-- 地点 -->
          <div style="margin-top: 20px;">
            <div v-if="form.study_type=='come'">
              <div style="text-align: left;">
                <span class="spanTitle">上课地点：</span>
                {{form.address}}
                <!-- <el-cascader placeholder="选择所在的地址" :options="ORIGIN" :props="{value:'label'}" v-model="area" filterable></el-cascader>
                <el-input style="width: 40%;margin-left: 10px;" v-model="address" placeholder="请输入详细地址"></el-input> -->
              </div>
            </div>
          </div>

          <div class="margrinTopTwenty">
            <span class="spanTitle">精选课程：</span>
            <el-tag v-if="form.is_featured=='0'">否</el-tag>
            <el-tag v-if="form.is_featured=='1'">是</el-tag>
          </div>
          <div style="margin-top: 20px;">
            <div>
              <span class="spanTitle">需要签到：</span>
              <el-tag v-if="form.need_check_in=='0'">否</el-tag>
              <el-tag v-if="form.need_check_in=='1'">是</el-tag>
            </div>
            <div v-if="form.need_check_in==1">
              <div class="margrinTopTwenty">
                <span class="spanTitle">签到积分：</span>
                <span>
                  {{form.check_in_integral}} 分/天/次
                </span>
              </div>
            </div>
          </div>

          <div class="margrinTopTwenty">
            <span class="spanTitle">开启状态：</span>
            <el-tag type="danger" v-if="form.status=='0'">下架</el-tag>
            <el-tag type="success" v-if="form.status=='1'">上架</el-tag>
          </div>
          <div class="margrinTopTwenty">
            <span class="spanTitle">课程排序：</span>
            <span class="widthFive">{{form.sort}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二部分 -->
    <div class="contentCss">

      <div class="comboTitle">课程目录</div>
      <div style="margin: 20px;">
        <el-table :data="contentsList" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border style="width: 100%;">
          <!-- <el-table-column align="center" type="index" label="序号" /> -->
          <el-table-column sortable align="center" prop="section_num" label="章节序号" />
          <el-table-column sortable align="center" prop="section_name" label="章节名称" />
          <el-table-column sortable align="center" prop="allow_try" label="试学">
            <template slot-scope="scope">
              <div v-if="scope.row.allow_try=='1'">是</div>
              <div v-if="scope.row.allow_try=='0'">否</div>
            </template>
          </el-table-column>
          <el-table-column sortable align="center" prop="allow_try" label="试学时长(秒)">
            <template slot-scope="scope">
              <div>{{scope.row.attempt_learn_time}}</div>
            </template>
          </el-table-column>
          <el-table-column sortable align="center" prop="video_name" label="章节内容">
            <template slot-scope="scope">
              <el-button type="text" @click="clickShowVideo(scope.row.video_url)">
                {{scope.row.video_name}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column sortable align="center" prop="created_at" label="创建时间" />
          <el-table-column sortable align="center" prop="created_at" label="更新时间" />
        </el-table>
        <div>
          <!-- 展示视频 -->
          <div class="showVideoCss">
            <el-dialog style="text-align: center;font-weight: bold;color: #626365;" title="查看视频" :destroy-on-close="true"
              :show-close="false" :visible.sync="showVideo">
              <video :src="video_url" controls="controls" muted="muted" preload="preload" width="100%" height="100%">
              </video>
              <div style="text-align: center;margin-top: 10px;">
                <el-button type="primary" @click.stop="showVideo=false">关闭</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <!-- 第三部分 -->
    <div class="contentCss">
      <div class="comboTitle">答题互动</div>
      <div style="margin: 20px;">
        <el-table :data="questionList" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border style="width: 100%;">
          <el-table-column align="center" type="index" label="序号" />
          <el-table-column align="center" prop="id" label="ID" />
          <el-table-column sortable align="center" prop="question" label="题目名称" />
          <el-table-column sortable align="center" prop="sort" label="题目顺序" />
          <el-table-column sortable align="center" prop="integral" label="积分" />
          <el-table-column sortable align="center" prop="limit_num" label="最大作答次数" />
          <el-table-column sortable align="center" prop="option" label="选项">
            <template slot-scope="scope">
              <div v-for="item in scope.row.option">
                <span style="color: #0000FF;margin-right: 20px;">
                  <span v-if="item.is_true==1">✓</span>
                </span>
                <span>{{item.option}}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 第四部分 -->
    <div class="contentCss">
      <div class="comboTitle">积分规则</div>
      <div style="margin: 20px;display: flex;">
        <div style="line-height: 40px;margin-right: 20px;">
          <span>积分兑换课程：</span>
          <el-tag v-if="integralRedio=='0'">否</el-tag>
          <el-tag v-if="integralRedio=='1'">是</el-tag>
          <span v-if="integralRedio=='1'" class="margrinTopTwenty">
            <span class="widthFive">
              {{form.check_in_integral}} 积分
            </span>
          </span>
        </div>
        <div style="line-height: 40px;">
          <span>邀请用户获得：</span>
          <span class="widthFive">{{form.share_integral}} 积分</span>
        </div>
      </div>
    </div>
    <!-- 第五部分 -->
    <div class="contentCss">
      <div class="comboTitle">课程介绍</div>
      <div style="margin: 20px;">
        <div v-html="form.introduce"></div>
        <!-- <vue-ueditor-wrap ref="vueUeditor" v-model="form.introduce" :config="myConfig"></vue-ueditor-wrap> -->
      </div>
    </div>
    <div style="text-align: center;height: 40px;line-height: 40px;background: #d8d8d8;color: #9a9a9a;margin: -25px ;margin-top: 20px;clear: both;">--没有了--</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          id: "",
          thumb_id: "",
          name: "",
          desc: "",
          price: "",
          num_vip_price: "",
          time_vip_price: "",
          study_type: "come",
          address: "",
          teacher_id: "",
          is_featured: "1",
          need_check_in: "1",
          check_in_integral: "",
          exchange_integral: "",
          share_integral: "",
          status: "1",
          sort: "",
          label_arr: [],
          type_arr: [],
          contents_arr: [],
          question_arr: [],
          introduce: ""
        },
        integralRedio: "1",
        type_id: [],
        imageUrl: "",
        showDelPic: false,
        modelMsg: false,
        modelTitle: false,
        showVideo: false,
        vshow: false,
        title: "",
        addORupdate: "",
        contentsData: {
          id: "",
          section_num: "",
          section_name: "",
          video_id: "",
          video_name: "",
          video_url: "",
          allow_try: "1"
        },
        questionData: {
          id: "",
          question: "",
          sort: "",
          integral: "",
          limit_num: "",
          option: [{
            id: "",
            option: "",
            is_true: ""
          }]
        },
        titleAndAnswer: {
          checked1: "",
          checked2: "",
          checked3: "",
          checked4: "",
          answer1: "",
          answer2: "",
          answer3: "",
          answer4: "",
        },
        questionList: [],
        video_url: "", //展示大视频
        contentsList: [],
        formOne: [],
        typeList: [],
        teacherList: [],
        area: [],
        address: "",
        tagOne: "",
        dynamicTags: [], //任务标签
        studyWays: [{
            "id": "online",
            "label": "线上"
          },
          {
            "id": "come",
            "label": "线下"
          }
        ],
        index: null,
        videoFlag: false,
        videoUploadPercent: "",
        updateid: undefined,
      }
    },
    created() {
      this.updateid = this.$route.query.id

    },
    mounted() {
      // this.getCourseTypeList()
      this.getTeacherList()
      if (this.updateid > 0) {
        this.updateDetail(this.updateid)
      }
    },
    methods: {
      //查看大视频
      clickShowVideo(video_url) {
        this.showVideo = true
        this.video_url = video_url
      },
      /* 修改 */
      updateDetail(updateid) {
        this.$api.getCourseDetail({
          course_id: updateid
        }).then(res => {
          let data = res.data.data
          //地址处理
          let areaList = []
          this.form.address = data.address
          this.form.desc = data.desc
          this.form.name = data.name
          this.form.price = data.price
          this.form.num_vip_price = data.num_vip_price
          this.form.time_vip_price = data.time_vip_price
          /* 课程类型 获取*/
          data.type_info.forEach(item => {
            this.form.type_arr.push(parseInt(item.classify_id))
          })
          /* 课程标签 获取*/
          data.label_info.forEach(item => {
            this.dynamicTags.push(item.name)
          })
          this.form.id = data.id
          this.form.thumb_id = data.thumb_id
          this.form.label_arr = this.dynamicTags
          this.form.teacher_id = parseInt(data.teacher_id)
          this.form.study_type = data.study_type
          this.form.is_featured = data.is_featured
          this.form.need_check_in = data.need_check_in
          this.form.check_in_integral = data.check_in_integral
          this.form.share_integral = data.share_integral
          this.form.exchange_integral = data.exchange_integral
          this.form.exchange_integral != "0" ? this.integralRedio = "1" : this.integralRedio = "0"
          this.form.status = data.status
          this.form.sort = data.sort
          this.form.introduce = data.introduce
          this.imageUrl = data.thumb_url
          console.log(this.imageUrl)
          this.contentsList = data.content_info
          this.questionList = data.question_info
          this.typeList = data.type_info
          console.log(this.typeList)
        })
      },
      //获取导师列表
      getTeacherList() {
        this.teacherList = []
        let params = {
          "page": 1,
          "limit": 100000
        }
        this.$api.getTeacherList(params).then(res => {
          res.data.data.forEach(item => {
            let option = {
              "id": item.id,
              "label": item.name
            }
            this.teacherList.push(option)
          })
        })
      },
      //获取课程类型列表
      // getCourseTypeList() {
      //   this.typeList = []
      //   let params = {
      //     "page": 1,
      //     "limit": 100000
      //   }
      //   this.$api.getCourseTypeList(params).then(res => {
      //     res.data.data.forEach(item => {
      //       let option = {
      //         "id": item.id,
      //         "label": item.name
      //       }
      //       this.typeList.push(option)
      //     })
      //   })
      // },
    }
  }
</script>

<style scoped="scoped">
  .showVideoCss /deep/.el-dialog {
    width: 60% !important;
    margin-top: 8vh !important;
  }

  /deep/.el-dialog {
    width: 35% !important;
    margin-top: 6vh !important;
  }

  .msgDiv /deep/label {
    font-weight: 500;
    color: #575757;
  }

  .msgDiv {
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 15px;
  }

  .margrinThirty {
    margin: 25px;
  }

  .contentCss {
    margin-top: 30px;
    margin-left: 50px;
  }

  .margrinTopTwenty {
    margin-top: 20px;
    height: 40px;
    line-height: 40px;
  }

  .comboTitle {
    font-size: 20px;
    font-weight: bold;
  }

  .comboMain {
    display: flex;
  }

  .widthFive {
    width: 50%;
    color: #999999;
  }

  .spanTitle {
    width: 100px;
    display: inline-block;
    text-align: right;
    color: #343434;
  }

  .imageCss {
    display: flex;
    line-height: 60px;
    margin-right: -20px;
  }

  .widthTwentyPercent {
    width: 20%;
  }

  .tasklabel .el-input {
    width: 200px;
    display: flex;
    flex-wrap: nowrap;

  }

  .videoCss /deep/.el-upload {
    height: 200px;
  }

  /* 图片上传css */
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .deleteClass {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 16px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #00000066;
    color: #e4dcdc;
  }
</style>
